<template>
    <div class="top">
        <span @click="$router.back()" style="color:white;line-height: 55px;margin-left: 20px;overflow: hidden;">
            <van-icon name="arrow-left" />
        </span>
        <h3>文章详情</h3>

        <div>
            <!-- 标题 -->
            <div class="xinxi">
                <h2>{{ DetailList.title }}</h2>
            </div>

            <!-- 发布者信息 -->
            <div class="Information">
                <van-image round width="4rem" height="4rem" style="float:left" :src="DetailList.avatar" />
                <h4>{{ DetailList.nickname }}</h4>
                <span>{{ DetailList.time | formatDate }}</span>
            </div>
        </div>

        <!-- 文章内容 -->
        <div class="content" style="margin-bottom:30px">
            <p>
                {{ DetailList.content }}
            </p>
            <div :class="{
                none: this.a == 0,
                nones: this.a == 1,
                more: this.a == 2,
                mores: this.a == 3
            }">
                <img v-for="(item, index) in DetailList.imageSrc" :key="index" v-lazy="item" />
            </div>

        </div>


        <!-- 评论 -->
        <!-- 文章评论列表 -->
        <h2 style="padding-left:5%;color: pink;">精彩评论</h2>
        <van-cell class="comment-item" v-for="(ios, index) in Clist" :key="index">
            <van-image slot="icon" class="avatar" round fit="cover" :src="ios.info.avatar" />
            <div slot="title">
                <div class="title-w">
                    <div class="name">{{ ios.info.nickname }}</div>
                    <div class="like-w">
                        <van-icon class="like-icon liked" :color="ios.is_like ? '#f00' : '#777'"
                            @click="commentlike(ios._id, index)" name="good-job" />
                        <!-- 点赞数量 -->
                        <span class="like-count">{{ ios.like_count }}</span>
                    </div>
                </div>
                <div class="content">{{ ios.content }}</div>

                <!-- 回复和时间 -->
                <div class="info" style="margin-bottom:40px">
                    <span class="pubdate">{{ ios.create_time | formatDate }}</span>
                    <van-button class="reply-btn" round size="mini" @click="Reply(ios._id)">回复</van-button>
                    <van-button class="reply-btn" round size="mini" @click="look(ios._id)">查看回复</van-button>
                </div>

                <!-- 回复评论 -->
                <van-popup v-model="showss" position="bottom">
                    <div class="post-comment" style="width:100%">
                        <van-field v-model="value" rows="4" autosize type="textarea" maxlength="100"
                            placeholder="善语结善缘，恶言伤人心~" show-word-limit />
                        <div style="width: 100%;">
                            <van-button size="large" type="primary" color="#3399ff" @click="replys">发布</van-button>
                        </div>
                    </div>
                </van-popup>
            </div>
        </van-cell>

        <!-- 弹出层 -->
        <van-popup v-model="shownr" position="bottom" closeable close-icon="close" :style="{ height: '50%' }">
            <!-- 提示 -->
            <h4 style="color:black;text-align: center;font-weight: 500;">{{ pl }}{{ hf }}</h4>
            <!-- 若 没有评论  则显示
             -->
            <p style="color:gray;position: absolute;top: 40%;left: 30%;" v-if="have">平等表达，友善交流</p>

            <van-cell class="comment-item" v-for="(item, index) in RList" :key="index">
                <van-image slot="icon" class="avatar" round fit="cover" :src="item.info.avatar" />
                <div slot="title">
                    <div class="title-w">
                        <div class="name">{{ item.info.nickname }}</div>
                        <div class="like-w">
                            <van-icon class="like-icon liked" :color="item.is_like ? '#f00' : '#777'"
                                @click="commentlikes(item._id, index)" name="good-job" />
                            <!-- 点赞数量 -->
                            <span class="like-count">{{ item.like_count }}</span>
                        </div>
                    </div>
                    <div class="content">{{ item.content }}</div>

                    <div class="info" style="margin-bottom:40px">
                        <span class="pubdate">{{ item.create_time | formatDate }}</span>
                        <!-- <van-button class="reply-btn" round size="mini" @click="Reply"> 回复</van-button> -->
                        <!-- <van-button class="reply-btn" round size="mini" @click="look">查看回复</van-button> -->
                    </div>
                </div>
            </van-cell>
        </van-popup>

        <!-- 底部 -->
        <div class="article-bottom">
            <van-button class="comment-btn" type="default" @click="open" round size="small">写评论</van-button>
            <!-- 评论图标 -->
            <van-icon name="comment-o" color="#777" />
            <!-- 收藏图标 -->
            <van-icon name="star" @click="Add" :color="DetailList.is_fav ? '#f00' : '#777'" />
            <!-- 点赞图标 -->
            <van-icon name="good-job" @click="like" :color="DetailList.is_like ? '#f00' : '#777'" />
            <!-- 转发图标 -->
            <van-icon name="share" color="#777777" @click="showShare = true"></van-icon>
        </div>

        <!-- 评论文章 -->
        <van-popup v-model="show" position="bottom">
            <div class="post-comment" style="width:100%">
                <van-field v-model="value" rows="4" autosize type="textarea" maxlength="100" placeholder="善语结善缘，恶言伤人心~"
                    show-word-limit />
                <div style="width: 100%;">
                    <van-button size="large" type="primary" color="#3399ff" @click="publish">发布</van-button>
                </div>
            </div>
        </van-popup>

        <!-- 分享面板 -->
        <van-share-sheet v-model="showShare" title="立即分享给好友" :options="options" @select="onSelect" />

    </div>
</template>

<script>
import { Image as VanImage, Notify, Skeleton, Dialog, ShareSheet, Toast } from 'vant';
import { mapState } from 'vuex';
// 分享面板



import { detail, AddFav, Iike, UnIike, RemoveFav, CommentList, AddComment, CommentLike, CommentUnlike, replyList } from '@/api/api'

export default {
    data() {
        return {
            article_id: '',  //文章id
            title: '',       //文章内容
            DetailList: [],  //列表
            show: false,  // 评论文章的
            showss: false,  // 回复评论的
            shownr: false,  //弹出层的
            value: '',
            Clist: [],  //评论列表
            commentID: '', //评论id
            RList: [],   //回复的评论
            a: '',  // 获取图片的length
            likenum: 0,  //点赞数量
            ssid: '',   //查看回复 里的评论id
            oid: '',   //回复二级评论的评论id
            pl: 0,   //评论的个数
            hf: '条回复',     //回复内容
            have: true,     //是否有评论
            showShare: false, //分享面板
            options: [
                { name: '微信', icon: 'wechat' },
                { name: '微博', icon: 'weibo' },
                { name: '复制链接', icon: 'link' },
                { name: '分享海报', icon: 'poster' },
                { name: '二维码', icon: 'qrcode' },
            ],
        }
    },
    components: {
        [Image.name]: Image,
        [VanImage.name]: VanImage,
        [Skeleton.name]: Skeleton,
        [Dialog.name]: Dialog,
        [ShareSheet.name]: ShareSheet,
        [Notify.Component.name]: Notify.Component,

    },
    created() {
        let { id, title } = this.$route.query;
        this.article_id = id;
        this.title = title;
        // 获取文章详情
        this.getDetail()
        // 获取评论列表
        this.getCommentList()
        this.loading = false
    },
    mounted() {
    },
    computed: {
        ...mapState(['uid'])
    },
    methods: {
        // 获取文章详情
        getDetail() {
            let { article_id, uid: user_id } = this;
            detail({
                user_id,
                article_id
            }).then(res => {
                console.log(res.data.data)
                this.DetailList = res.data.data
                this.a = res.data.data.imageSrc.length
            })
        },

        // 获取评论列表
        getCommentList() {
            let { article_id, uid: user_id } = this;
            CommentList({
                article_id,
                skip: 0,
                limit: 100,
                user_id
            }).then(res => {
                console.log(res.data.data);
                this.Clist = res.data.data;
            })
        },

        // 回复评论
        Reply(o) {
            this.oid = o;
            this.showss = true;
        },
        // 回复评论区的评论
        replys() {
            let { uid: user_id, article_id } = this;
            AddComment({
                user_id,
                article_id,
                content: this.value,
                reply_comment_id: this.oid,
                comment_type: 1
            }).then(res => {
                if (res.data.code == 0) {
                    Dialog({ message: res.data.msg });
                    this.showss = false
                }
            })
        },

        //  查看回复 回复列表  (数据)
        look(v) {
            this.ssid = v;
            let { uid: user_id, article_id } = this;
            replyList({
                skip: 0,
                limit: 100,
                user_id,
                reply_comment_id: this.ssid,
                article_id
            }).then(res => {
                this.RList = res.data.data;
                if (res.data.code == 0) {
                    if (this.RList.length != 0) {
                        this.pl = this.RList.length;
                        this.hf = '条回复'
                    } else {
                        this.pl = '';
                        this.hf = '快来评论叭！！！';
                    }
                }
            });

            this.shownr = true;
        },

        // 收藏文章
        Add() {
            let uid = this.uid;
            // 先判断你是否登录
            if (uid) {
                let { article_id, uid: user_id, DetailList: { is_fav } } = this;
                // 判断现在的状态是否被收藏
                if (is_fav) {
                    // 取消收藏
                    RemoveFav({
                        article_id,
                        user_id
                    }).then(res => {
                        console.log(res);
                        Dialog({ message: res.data.msg });
                        if (res.data.code == 0) {
                            this.DetailList.is_fav = false
                        }
                    })
                } else {
                    // 收藏
                    AddFav({
                        user_id,
                        article_id
                    }).then(res => {
                        console.log(res);
                        Dialog({ message: res.data.msg });
                        if (res.data.code == 0) {
                            this.DetailList.is_fav = true
                        }
                    })
                }
                // 没登录 跳转
            } else {
                Toast('请您先登录~');
                setTimeout(() => {
                    this.$router.push('login')
                }, 2000);
            }


        },

        // 点赞文章
        like() {
            let uid = this.uid;
            // 先判断你是否登录
            if (uid) {
                let { article_id, uid: user_id, DetailList: { is_like } } = this;

                // 判断现在的状态是否被点赞
                if (is_like) {
                    // 取消点赞
                    UnIike({
                        user_id,
                        article_id
                    }).then(res => {
                        console.log(res);
                        Dialog({ message: res.data.msg });
                        if (res.data.code == 0) {
                            this.DetailList.is_like = true
                            this.getDetail()
                        }
                    })
                } else {
                    // 点赞
                    Iike({
                        user_id,
                        article_id
                    }).then(res => {
                        console.log(res)
                        Dialog({ message: res.data.msg });
                        if (res.data.code == 0) {
                            this.DetailList.is_like = false
                            this.getDetail()
                        }
                    })
                }
            } else {
                Toast('请您先登录~');
                setTimeout(() => {
                    this.$router.push('login')
                }, 2000);
            }


        },

        // 点赞评论
        commentlike(e, index) {
            this.commentID = e;
            let { uid: user_id } = this;
            let v = this.Clist[index].is_like;

            // 判断该评论是否已经被点赞了
            if (!v) {
                CommentLike({
                    user_id,
                    comment_id: this.commentID
                }).then(res => {
                    console.log(res);
                    Dialog({ message: res.data.msg });
                    this.v = false
                    this.getCommentList();
                })
            } else {
                CommentUnlike({
                    user_id,
                    comment_id: this.commentID
                }).then(res => {
                    console.log(res);
                    Dialog({ message: res.data.msg });
                    this.v = true
                    this.getCommentList();

                })
            }
        },

        // 二级评论点赞
        commentlikes(e, index) {
            this.commentID = e;
            let { uid: user_id } = this;
            let v = this.RList[index].is_like;

            // 判断该评论是否已经被点赞了
            if (!v) {
                CommentLike({
                    user_id,
                    comment_id: this.commentID
                }).then(res => {
                    console.log(res);
                    Dialog({ message: res.data.msg });
                    this.v = false;
                    this.look()
                })
            } else {
                CommentUnlike({
                    user_id,
                    comment_id: this.commentID
                }).then(res => {
                    console.log(res);
                    Dialog({ message: res.data.msg });
                    this.v = true;
                    this.look()
                })
            }
        },

        // 发布评论的点击
        open() {
            this.show = true
        },

        // 发布评论
        publish() {
            let { article_id, uid: user_id } = this;
            // 回复文章的评论
            AddComment({
                user_id,
                article_id,
                content: this.value,
                comment_type: 0
            }).then(res => {
                if (res.data.code == 0) {
                    this.show = false;
                    // this.$router.go(0)  //刷新页面
                    // location.reload(false)
                    Dialog({ message: res.data.msg });
                    this.getCommentList()

                }
            })
        },

        // 弹出层
        showPopup() {
        },
        // 
        onSelect() {
            this.showShare = false;
        },
    },

    // 时间戳转换年月日
    filters: {
        formatDate: function (value) {
            let date = new Date(value);
            let y = date.getFullYear();
            let MM = date.getMonth() + 1;
            MM = MM < 10 ? "0" + MM : MM;
            let d = date.getDate();
            d = d < 10 ? "0" + d : d;
            let h = date.getHours();
            h = h < 10 ? "0" + h : h;
            let m = date.getMinutes();
            m = m < 10 ? "0" + m : m;
            return y + "-" + MM + "-" + d + " " + h + ":" + m;
        }
    },
}
</script>

<style scoped lang="less">
//图片
.content {
    overflow: hidden;

    img {
        max-width: 100%;
    }

    .none img {
        display: none;
    }

    .nones {
        width: 100%;
    }

    .nones img {
        width: 100%;
    }

    .more img {
        width: 47%;
        height: 150px;
        padding-left: 10px;
        margin-top: 10px;
    }

    .mores img {
        width: 32%;
        padding-left: 4px;
        height: 100px;
    }
}

// 头部
.top {
    width: 100%;
    height: 55px;
    background-color: #3399ff;
}

.top span {
    float: left;
    line-height: 55px;
}

.top h3 {
    color: white;
    line-height: 55px;
    margin-top: 0;
    text-align: center;
    margin-right: 15px;
}

// 内容
.xinxi h2 {
    padding-left: 15px;
    overflow: hidden;
    word-wrap: break-word;
}

// 信息
.top .Information {
    width: 100%;
    padding-left: 15px;
    // overflow: hidden;
    margin-bottom: 80px;
}

.Information h4 {
    font-size: 16px;
    font-weight: 500;
    margin-bottom: 0;
    padding-left: 75px;
}

.Information span {
    padding-left: 15px;
    color: gray;
}

// 文章内容
.content p {
    font-size: 16px;
    text-indent: 2em;
    overflow: hidden;
    word-wrap: break-word;
}

// 评论
.comment-item {
    .avatar {
        width: 36px;
        height: 36px;
        margin-right: 13px;
    }

    .name {
        font-size: 16px;
        color: #555;
    }

    .content {
        font-size: 16px;
        color: #222222;
        margin: 10px 0;
    }

    .info {
        display: flex;
        height: 36px;
        align-items: center;
    }

    .pubdate {
        font-size: 12px;
        margin-right: 12px;
    }

    .title-w {
        display: flex;
        justify-content: space-between;
        height: 36px;
        align-items: center;
    }

    .like-w {
        display: flex;
        align-items: center;
        justify-content: center;
    }
}

// 底部
.article-bottom {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    justify-content: space-around;
    align-items: center;
    box-sizing: border-box;
    height: 44px;
    border-top: 1px solid #d8d8d8;
    background-color: #fff;
    overflow: hidden;
    word-wrap: break-word;

    .comment-btn {
        width: 141px;
        height: 23px;
        border: 1px solid #eeeeee;
        font-size: 15px;
        line-height: 23px;
        color: #a7a7a7;
    }

    .van-icon {
        font-size: 20px;

        .van-info {
            font-size: 11px;
            background-color: #e22829;
        }
    }
}
</style>